< template>< div class="calender">< div class="top">< div class="top_date"> {
        {
        year
    }
}

年 {
        {
        month
    }
}

月 < /div><div class="btn_wrap"><ul><li @click="handleShowNextMonth">下个月 </li>< li @click="handleShowToday">今天 < /li><li @click="handleShowLastMonth">上个月 </li>< /ul></div>< /div><div class="date_wrap"><ul class="week"><li>日 </li>< li>一 < /li><li>二 </li>< li>三 < /li><li>四 </li>< li>五 < /li><li>六 </li>< /ul><ul class="day"><li v-for="(item,index) in days" :key=index> {
        {
        item
    }
}

< /li></ul>< /div></div>< /template><script>export default {

    name: 'calender',

    data() {

        return {

            year: '',

                month: '',

                days: []
        }

    }

    ,

    methods: {

        //得到当前年这个月分有多少天

        getDays(Y, M) {

            let day=new Date(Y, M,
                0).getDate() return day;

        }

        ,

        //得到当前年，这个月的一号是周几

        getWeek(Y, M) {

            let now=new Date() now.setFullYear(this.year) now.setMonth(this.month - 1) now.setDate(1);

            let week=now.getDay();

            return week;

        }

        ,

        pushDays() {

            //将这个月多少天加入数组days

            for (let i=1; i <=this.getDays(this.year,
                    this.month); i++) {
                this.days.push(i)
            }

            //将下个月要显示的天数加入days for
            (let i=1; i <=42 - this.getDays(this.year,
                    this.month) - this.getWeek(this.year,
                    this.month); i++) {
                this.days.push(i)
            }

            //将上个月要显示的天数加入days for
            (let i=0; i < this.getWeek(this.year,
                    this.month); i++) {
                var lastMonthDays=this.getDays(this.year,
                    this.month - 1) this.days.unshift(lastMonthDays - i)
            }

            s console.log(this.days) console.log(this.getWeek(this.year,
                    this.month))
        }

        ,
        getDate() {
            let now=new Date();
            this.year=now.getFullYear();
            this.month=now.getMonth()+1;
            this.pushDays();
        }

        ,
        changeDate() {}

        ,
        handleShowNextMonth() {
            this.days=[];

            if (this.month < 12) {
                this.month=this.month+1;
                this.pushDays();
            }

            else {
                this.month=this.month=1;
                this.year=this.year+1;
                this.pushDays();
            }
        }

        ,
        handleShowToday() {
            this.days=[];
            let now=new Date();
            this.year=now.getFullYear();
            this.month=now.getMonth()+1;
            this.pushDays();
        }

        ,
        handleShowLastMonth() {
            this.days=[];

            if (this.month> 1) {

                this.month=this.month - 1;

                this.pushDays();

            }

            else if (this.year > 1970) {

                this.month=12;

                this.year=this.year - 1;

                this.pushDays();

            }

            else {

                alert("不能查找更远的日期")
            }



        }

    }

    ,

    mounted() {

        this.getDate();

    }

}

< /script><style scoped>.calender {

    width: 600 px;

    position: relative;

    margin: 0 auto;

    margin - top: 50 px;

    border: 1 px solid# ddd;

    padding: 20 px;

}

.top {

    width: 100 %;

    position: relative;

    display: flex;

    border - bottom: 1 px solid# ddd;

    padding - bottom: 20 px;

}

.top_date {

    width: 100 px;

    text - align: left;

    line - height: 42 px;

}

.btn_wrap {

    flex: 1;

    text - align: right
}

.btn_wrap ul {

    display: flex;

    flex - direction: row - reverse
}

.btn_wrap ul li {

    padding: 10 px 20 px;

    border: 1 px solid# ddd;

    font - size: 14 px;

    line - height: 20 px;

    cursor: pointer
}

.btn_wrap ul li: first - child {

    border - left: none;

}

.btn_wrap ul li: last - child {

    border - right: none;

}

.date_wrap {

    position: relative;

}

.week {

    display: flex;

    flex - direction: row;

    padding: 20 px;

    font - size: 16 px;

}

.week li {

    width: 14.28 %;

}

.day {

    display: flex;

    flex - direction: row;

    padding: 20 px;

    font - size: 16 px;

    flex - wrap: wrap;

}

.day li {

    width: 14.28 %;

    padding: 20 px;

    box - sizing: border - box;

    border: 1 px solid# ddd
}

.day li: nth - child(n + 8) {

    border - top: none;

}

.day li: nth - child(n + 1) {

    border - right: none;

}

.day li: nth - child(7n) {

    border - right: 1 px solid# ddd
}

< /style>
